<template>
    <div class="coms">
        <div v-for="(item,index) of coms" class="coms-item">
          <div v-if="item.code=='banner'" >
           <div  shadow="always" class="m-margin-bottom item" :body-style="{ padding: '8px' }" v-for="(ele,index) of item.settings.list">
            <img  :src="ele.src" class="banner-image" @click="onOpenWindow(ele.href)"/>
            <div v-if="ele.title" class="title">{{ele.title}}</div>
            <!-- card body -->
           </div>
            
          </div>
        </div>
        
    </div>
</template>

<script setup>
let props = defineProps({
    coms:{
        type:Array,
        default(){
            return []
        }
    }
})
const onOpenWindow = (href)=>{
    if(href){
       window.open(href,'__blank')
    }
   
}
</script>

<style lang="scss" scoped>
.banner-image{
    width:100%;
    cursor:pointer;
}
.title{
    color:#333;
    margin-top:8px;
}
.coms{

    max-width:700px;
    margin:0 auto;
    margin-top:20px;
    @media (min-width: 1000px){
      display: block;
      width:250px;
     }
}

.item{
    margin-bottom:20px;
     padding:16px;
    border-radius:4px;
     background:#fff;
    
    border:1px solid #eee;
    @media (min-width: 1000px){
     width:100%;
     }
     &:hover{
       box-shadow:0 0 8px 8px rgba(0,0,0,0.015);
     }
  
  
}
</style>